<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" media="screen" type="text/css" href="./css/main.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/cursor.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/tbar.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/window.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/slider.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/colorpicker.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./css/widget.css" />

	<script type="text/javascript" src="./js/jquery-1.4.min.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/colorpicker.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/sketching.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/Cache.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/Draw.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/FileUtil.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/gfilter.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/ImageTool.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/Storage.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/ToolBar.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/EndlessPainter.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/DragUtil.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/clock.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/startShape.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/direction.js" charset="UTF-8" defer="defer"></script>
	<script type="text/javascript" src="./js/resize.js" charset="UTF-8" defer="defer"></script>
<title>涂鸦</title>
</head>

<body style="">
</div>
	<table cellpadding="0" cellspacing="0" class="toolbar-container">
	  <tr>
	    <td width="16">
	  	   <input type="file" id="fileChoser" accept="image/*" style="display : none;"/>
	  	   <img src="./images/open.png" class="tool-ico" title="打开" id="openBtn"/>
	   </td>
		<td width="16"><img src="images/pencil.png" class="tool-ico" title="铅笔" id="pencilBtn"/></td>
		<td width="16"><img src="./images/handwriting.png" class="tool-ico" title="毛刷" id="handwritingBtn"/></td>
		<td width="16"><img src="./images/text.png" class="tool-ico" title="文字" id="textBtn" /></td>
		<td width="16"><img src="./images/line.png" class="tool-ico" title="直线" id="lineBtn" /></td>
		<td width="16"><img src="./images/circle.png" class="tool-ico" title="圆形" id="circleBtn" /></td>
		<td width="16"><img src="./images/circleFill.png" class="tool-ico" title="实心圆形" id="circleFillBtn" /></td>
		<td width="16"><img src="./images/square.png" class="tool-ico" title="矩形" id="squareBtn" /></td>		
		<td width="16"><img src="./images/squareFill.png" class="tool-ico" title="实心矩形" id="squareFillBtn" /></td>
		<td width="16"><img src="./images/triangle.png" class="tool-ico" title="三角形" id="triangleBtn" /></td>
		<td width="16"><img src="./images/triangleFill.png" class="tool-ico" title="实心三角形" id="triangleFillBtn" /></td>
		<td width="16">
			<img  id="shapeBtn" src = './images/shape.png' class="tool-ico" title = '工具' />
			<div id="shapes" style="width:60px;" class="selector-outer">
				<br><img src="./images/flower.png" title="菊花残"  class="inner-btn inner-btn-size" id="flowerBtn" />
				<hr>
				<img src="./images/target.png" title="菊花烈" class="inner-btn inner-btn-size" id="targetBtn" />
				<hr>
				<img src="./images/binary.png" title="千变万化" class="inner-btn inner-btn-size" id="binaryBtn" />
				<hr>
				<img src="./images/resize.png" title="画布尺寸" class="inner-btn inner-btn-size" id="resizeBtn" />
				<br>
				<br>
			</div>
		</td>	
		<td width="16">
			<img  id="chooseSize" src = './images/size2.png' class="tool-ico" title = 'Size尺码' />
				<div id="line_size" style="width:90px;" class="selector-outer">
					<br><img src="./images/size.png" class="inner-btn" width = '15px;' height = '15px;' id="lineSize_1" title="Size-A"/>
					<br><hr>
					<img src="./images/size.png" class="inner-btn" width = '25px;' height = '25px;' id="lineSize_2" title="Size-B" />
					<hr>
					<img src="./images/size.png" class="inner-btn" width = '35px;' height = '35px;' id="lineSize_3" title="Size-C" />
					<hr>
					<img src="./images/size.png" class="inner-btn" width = '45px;' height = '45px;' id="lineSize_4" title="Size-D" />
					<hr>
					<img src="./images/size.png" class="inner-btn" width = '50px;' height = '50px;' id="lineSize_5" title="Size-E" />
				</div>
		</td>
		<td width="16"><img src="./images/rubber.png" class="tool-ico" title="橡皮擦" id="rubberBtn"/></td> 
	</tr>
	
	<tr>
		<td width="16"><img src="./images/cancel.png" class="tool-ico" title="撤销" id="cancelBtn" /></td>
		<td width="16"><img src="./images/next.png" class="tool-ico" title="重做" id="nextBtn" /></td>
		<td width="16"><img src="./images/zoomIn.png" class="tool-ico" title="放大" id="zoomInBtn"/></td>
		<td width="16"><img src="./images/zoomOut.png" class="tool-ico" title="缩小" id="zoomOutBtn"/></td>
		<td width="16"><img src="./images/fill.png" class="tool-ico" title="填充" id="fillBtn" /></td>
		<td width="16"><img src="./images/spurt.png" class="tool-ico" title="喷桶" id="spurtBtn" /></td>
		<td width="16"><img src="./images/sucker.png" class="tool-ico" title="吸管" id="suckerBtn" /></td>
		<td width="16"><img src="./images/cut.png" class="tool-ico" title="裁剪" id="cutBtn" /></td>
		<!--<input type="color"" name="color" /> -->
		<td width="16">
			<div id="colorSelector">
				<div style="background-color: #0000ff;" title="颜色">
			</div>
		</div></td>
		<td width="16">
			<img src="./images/css3.png" class="tool-ico" title="滤镜" id="psBtn">
			<div id="psBtns" style="width:230px;" class="psBtns-align">
				<br>
					<img src="./images/css3.png" class="inner-btn inner-btn-size" id="ps_0" title="原图" />
					<span style="margin-left:120px; " id="r0" class="selector-inner">原图</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:grayscale(1);" 
						class="inner-btn inner-btn-size" id="ps_1" title="灰度" />
					<input type="range" name="points" min="0.01" max="1" step='0.01' id="r1" value="0.01"/>
					<span id='s1' class="selector-inner">1%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:sepia(1)" 
						class="inner-btn inner-btn-size" id="ps_2" title="怀旧" />
					<input type="range"name="points" min="0.01" max="1" step='0.01' id="r2" value="0.01"/>
					<span id='s2' class="selector-inner">1%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:invert(1);"
						class="inner-btn inner-btn-size" id="ps_3" title="反色">
					<input type="range" name="points" min="0.01" max="1" step='0.01' id="r3" value="0.01"/>
					<span id='s3' class="selector-inner">1%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:opacity(.5);" 
						class="inner-btn inner-btn-size"id="ps_4" title="透明度" />
					<input type="range" name="points" min="0.01" max="1" step='0.01' id="r4" value="1"/>
					<span id='s4' class="selector-inner">100%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:brightness(.5);"
						 class="inner-btn inner-btn-size" id="ps_5" title="亮度" />
					<input type="range" name="points" min="0.01" max="2" step='0.01' id="r5"  value="1" />
					<span id='s5' class="selector-inner">50%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:contrast(2);"
						 class="inner-btn inner-btn-size" id="ps_6" title="对比度" />
					<input type="range" name="points" min="0.01" max="1" step='0.01' value="1" id="r6"/>
					<span id='s6' class="selector-inner">100%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:blur(2px);"
						 class="inner-btn inner-btn-size" id="ps_7" title="清晰度" />
					<input type="range" name="points" min="0" max="10" step='0.01' id="r7" value="0"/>
					<span id='s7' class="selector-inner">1%</span>
				<hr>
					<img src="./images/css3.png" style="-webkit-filter:saturate(3);"
						 class="inner-btn inner-btn-size" id="ps_8" title="饱和度" />
					<input type="range" name="points" min="1" max="10" step='0.1' id="r8" value="1"/>
					<span id='s8' class="selector-inner">1%</span>
				<br/>
			</div>
		</td>
		<td width="16">
			<img src="./images/filter.png" class="tool-ico" title="图片处理" id="filterBtn">
			<div id="filters" style="width:60px;" class="selector-outer">
				<br>
					<img src="./images/filter.png" style="-webkit-filter:grayscale(1);" 
						class="inner-btn inner-btn-size" id="filter1" title="复古" />
				<hr>
				<img src="./images/filter.png" style="-webkit-filter:invert(1);"
						class="inner-btn inner-btn-size" id="filter2" title="反色" />
				<hr>
				<img src="./images/filter-sm.png" class="inner-btn inner-btn-size" id="filter3" title="素描" />
				<hr>
				<img src="./images/filter.png" style="-webkit-filter:blur(.8px);"
						class="inner-btn inner-btn-size" id="filter4" title="朦胧" />
				<hr>
				<img src="./images/filter-dk.png" class="inner-btn inner-btn-size" id="filter5" title="雕刻" />
						 <hr>
				<img src="./images/filter-jx.png" class="inner-btn inner-btn-size" id="filter6" title="镜像" />
				<br>
			</div>
		</td>
		<td width="16"><img src="./images/clear.png" class="tool-ico" title="清空" id="clearBtn"></td>
		<td width="16"><img src="./images/save.png" class="tool-ico" title="保存" id="saveBtn"></td>
		<td width="16">
		<a href="#" download="filter.png"  id="downloadImage_a">
			<img src="./images/download.png" class="tool-ico" title="下载" id="download" />
		</a>
		</td>
	  </tr>
</table>
		<!-- 画板画布-->
		<div style="float:left;width:30%;" id="canvasContainer">
			<canvas id="mainBoard" class="canvas-main"></canvas>
			<canvas id="buff" class="canvas-buff cursor-pencilBtn"></canvas>
		</div>
		<!-- 其它控件画布-->
		<div class="widgetContainer">
			<canvas id="widget-clock"></canvas>
			<canvas id="widgets-other"></canvas>
		</div>
		
		<!-- 缓存图片-->
		<div id="showHistory" >
			<table style="font-size:12px;">
				<tr>
					<td><img  src="images/noimg.png" class="historyImg" id="history_1"/></td>
					<td><img src = './images/noimg.png' class="historyImg" id="history_2"/></td>
				</tr>
				<tr align="center">
					<td><a href="javascript:void(0);" id="history_del_1">删除</a>&nbsp;
						<a href="javascript:void(0);" id="history_download_1" download="picture.png">下载</a></td>
					<td><a href="javascript:void(0);" id="history_del_2">删除</a>&nbsp;
						<a href="javascript:void(0);" id="history_download_2" download="picture.png">下载</a></td>
				</tr>
				</tr>
					<td><img src = './images/noimg.png' class="historyImg" id="history_3"/></td>
					<td><img src = './images/noimg.png' class="historyImg" id="history_4"/></td>
				</tr>
				<tr align="center">
					<td><a href="javascript:void(0);" id="history_del_3">删除</a>&nbsp;
						<a href="javascript:void(0);" id="history_download_3" download="picture.png">下载</a></td>
					<td><a href="javascript:void(0);" id="history_del_4">删除</a>&nbsp;
						<a href="javascript:void(0);" id="history_download_4" download="picture.png">下载</a></td>
				</tr>
			</table>
		</div>
		<div id="autoPaint" class="window-like" style="display:none; ">
			<table width="249" border="0" cellpadding="0" cellspacing="0">
			<thead>
			  <div class="win-tbar">&nbsp; <a href="#" style="cursor:pointer; padding-right:10px; " id="paintCloseIcon">X</a></div>
			</thead>
				<tr><td colspan="3">道生一 &nbsp; 一生二</td></tr>
				<tr><td colspan="3">二生三 &nbsp;  三生万物 ...</td></tr>

				<tr>
					<td width="43">T：</td>
					<td width="156"><input type="range" min="-5" max="5" step='0.01' value="-5" id="paint_a"/></td>
					<td width="41" id="paint_1">-5</td>
				</tr>
				<tr>
					<td>R：</td>
					<td><input type="range" min="-5" max="5" step='0.01' value="-5" id="paint_b"/></td>
					<td id="paint_2">-5</td>
				</tr>
				<tr>
					<td>B：</td>
					<td><input type="range" min="-5" max="5" step='0.01' value="1" id="paint_c"/></td>
					<td id="paint_3">1</td>
				</tr>
				<tr>
					<td>L：</td>
					<td><input type="range" min="-5" max="5" step='0.01' value="0" id="paint_d"/></td>
					<td id="paint_4">0</td>
				</tr>
				<tr>
					<td>fast</td>
					<td><input type="range" min="0" max="1000" step='10' value="500" id="paint_e"/></td>
					<td id="paint_5">slow</td>
				</tr>
				<tr>
					<td colspan="3" style="text-align:right;">
					
					<input type="image" id="randomColorBtn" src="./images/random.png" width="40" height="40" title="点击开启随机颜色"/>
					&nbsp;
					<input type="color" id="endlessColor" title="点击选择颜色" />
					&nbsp;
					<a href="#" id="paintBtn">确认</a>
					 &nbsp;
					<a href="#" style="margin-right : 10px; " id="paintCloseBtn">关闭</a><br><br>
					</td>
				</tr>
		  </table>
	</div>
	<!--方向控件-->
	<div id="direction" class="directionContainer" style="display:block ">
			<img src="./images/direction.png" border="0" usemap="#direction" hidefocus="true"
				 style="z-index:999; -webkit-filter:invert(1);" title=""/>
		<map id="direction" name="direction">
			<area shape="poly" alt="0" coords="47,8,58,23,59,24,54,24,54,36,42,36,42,24,37,24" href="#" title="UP-0°"/>
			<area shape="poly" alt="90" coords="60,42,72,42,72,36,87,47,88,48,72,59,72,54,60,54" href="#" title="RIGHT-90°"/>
			<area shape="poly" alt="180" coords="42,60,54,60,54,72,59,72,49,86,49,88,47,88,47,86,37,72,42,72" href="#" title="DOWN-180°"/>
			<area shape="poly" alt="270" coords="23,37,24,37,24,42,36,42,36,54,24,54,24,59,23,59,23,58,10,49,8,49,8,47,9,47" href="#" title="LEFT-270°" />
			<area shape="poly" alt="45" coords="59,33,70,22,76,20,74,25,62,36" href="#" title="UP-RIGHT-45°" />
			<area shape="poly" alt="135" coords="62,59,73,70,76,76,69,73,59,62" href="#" title="RIGHT-BOTTOM-135°" />
			<area shape="poly" alt="225" coords="33,58,36,62,26,74,20,76,22,70" href="#" title="LEFT-BOTTOM-225°" />
			<area shape="poly" alt="315" coords="20,19,26,21,36,32,36,34,33,36,22,25,20,18" href="#" title="LEFT-UP-315°" />
		</map>
	</div>
	<!--修改画布尺寸-->
	<div id="resizePanel" class="window-like">
		<table width="349" height="200" border="0" cellpadding="0" cellspacing="0">
			<thead>
		  <div class="win-tbar">
			  	<span style="padding-right:110px;">修改画布尺寸 </span>
			  	<a href="#" style="cursor:pointer; padding-right:10px; " id="resizeCloseIcon">X</a></div>
			</thead>
				<tr>
					<td width="43">
					宽：<input type="number" min="350" max="1024" step="1" id="resize-w" readonly="true"/>
					<img src="images/lock.png" id="lockImg" style=" margin-bottom:-7px;"/>
					高：<input type="number" min="480" max="768" step="1" id="resize-h" readonly="true"/>
					</td>
		  </tr>
				<tr>
					<td>
					快速调节
					<input type="range" min="50" max="150" step='1' value="100" id="quickResize"/>
					<span id="quickResizeTxt">100%</span>
					</td>
				</tr>
				<tr>
					<td><label><input type="checkbox" id="isLock" checked /><label for="isLock">锁定宽高比例</label></td>
				</tr>
				<tr>
					<td style="text-align:center;">
					
					<a href="#" id="doResize">应&nbsp;用</a>
					 &nbsp;
					<a href="#" style="margin-right : 10px; " id="resizeCloseBtn">关&nbsp;闭</a><br><br>
					</td>
				</tr>
	  </table>
	</div>
	
	
<div>
</body>
</html>
